<template>
	<view class="container">
		<view class="voucher-page">
			<view class="voucher-title">个人入园凭证</view>
			<view class="reservation-time">
<<<<<<< HEAD
				2024年07月17日 15:00-18:00
			</view>
			<view class="reservation-info">
				<text style="font-size: 20px ;font-weight: bold;">预约信息：</text>
				<view class="abc">
					<view class="info-item">
						<text>姓名：</text>
						<text>张三</text>
					</view>


					<view class="info-item">
						<text>证件类型：</text>
						<text>身份证</text>
					</view>
					<view class="info-item">
						<text>证件号码：</text>
						<text>xxxxxxxxxxx</text>
					</view>
					<view class="info-item">
						<text>手机号码：</text>
						<text>138xxxxxx88</text>
					</view>

					<view class="info-item">
						<text>同行儿童数：</text>
						<text>3</text>
					</view>

					<view class="info-item">
						<text>同行成人：</text>
						<text>张三 李四</text>
					</view>
				</view>
			</view>

=======
				<text>预约时间：</text>
				<text>{{ userInfo.date }}  ~ {{ userInfo.time }}</text>
			</view>
			<view class="reservation-info">
				<text style="font-size: 20px ;font-weight: bold;">预约信息：</text>
				<view class="info-item">
					<text>姓名：</text>
					<text>{{ userInfo.name }}</text>
				</view>
			</view>

			<view class="info-item">
				<text>证件类型：</text>
			<text>{{ userInfo.idType }}</text>
				
			</view>
			<view class="info-item">
				<text>证件号码：</text>
				<text>{{ userInfo.idNumber }}</text>
			</view>
			<view class="info-item">
				<text>手机号码：</text>
				<text>{{ userInfo.phone }}</text>
			</view>

<!-- 			<view class="info-item">
				<text>同行儿童数：</text>
				<text>3</text>
			</view> -->

			<view class="info-item">
				<text>同行成人：</text>
				<text>{{ userInfo.companions }}</text>
			</view>

>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
			<view class="hints">
			       <text class="hint-text">园区花草，种植不易请爱护</text>  
			       <text class="countdown-text">{{ countdownText }}</text>  
			     </view>  
		</view>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				userInfo: {
					name: ' ',
					idType: ' ',
					idNumber: ' ',
					phoneNumber: ' ',
					teamName: ' ',
					totalPeople: 50,
				},
				// 剩余时间（秒）
				remainingTime: 0,
				// 倒计时文本  
				countdownText: '',  
				// 定时器ID  
				countdownTimer: null, 
			};
		},
		
		created() {
		    // 假设这是从服务器获取剩余时间的函数  
		    // 这里我们直接设置一个模拟值来演示  
		    this.fetchRemainingTime();  
		  },  
		  
		methods: {  
		    fetchRemainingTime() {  
		      // 实际应用中，这里应该是异步请求获取剩余时间  
		      // 这里我们直接设置一个模拟值  
		      this.remainingTime = 259200; // 例如，1天10小时23分钟 = 1*24*3600 + 10*3600 + 23*60 = 106980秒  
		      this.startCountdown();  
		    },  
			
		    startCountdown() {  
		      this.countdownTimer = setInterval(() => {  
		        if (this.remainingTime > 0) {  
		          const days = Math.floor(this.remainingTime / (24 * 3600));  
		          const hours = Math.floor((this.remainingTime % (24 * 3600)) / 3600);  
		          const minutes = Math.floor((this.remainingTime % 3600) / 60); 
				  const seconds = Math.floor(this.remainingTime % 60); 
		          this.countdownText = `${days}天${hours}小时${minutes}分钟${seconds}秒后凭证将消失，可发起新的预约`;  
		          this.remainingTime--;  
		        } else {  
		          clearInterval(this.countdownTimer);  
		          this.countdownText = '凭证已消失，可发起新的预约';  
		        }  
		      }, 1000);  
		    },  
		  },  
		  
		  onUnload() {  
		      // 页面卸载时清除定时器  
		      if (this.countdownTimer) {  
		        clearInterval(this.countdownTimer);  
		      }  
		    },  
		    // 如果需要，还可以添加其他生命周期钩子或方法    
		
		
		onLoad() {
			// 从本地存储中读取数据
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},
		
	}
</script>

<style scoped>
	.voucher-page {
		padding: 20px;
		font-family: Arial, sans-serif;
	}

	.voucher-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
	}

	.reservation-time {
		margin-top: 20px;
		text-align: center;
	}

	.reservation-info {
		margin-top: 70px
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
		margin-top: 30px;

	}

	.hints {
		color: rgba(0, 0, 0, 0.5);
		font-size: 14px;
	}

	.hint-text {
		margin-top: 50px;
		display: block;
		text-align: center;
	}

	.countdown-text {
<<<<<<< HEAD
		margin-top: 40px;
=======
		margin-top: 20px;
>>>>>>> fd41927a8cc64a1a69275b918e5e2579087a90c4
		display: block;
		text-align: center;
		margin-bottom: 10px;
	}

	.container {
		/* 设置背景图片 */
		background-image: url('https://pic.imgdb.cn/item/668bb1eed9c307b7e9d23979.png');
		/* 设置背景图片覆盖整个元素 */
		background-size: cover;
		/* 背景图片不重复 */
		background-repeat: no-repeat;
		/* 背景图片固定不动 */
		background-attachment: fixed;
		/* 设置元素高度（如果需要） */
		height: 100vh;
		/* 或者其他高度值 */
		/* 其他样式 */
	}

	.abc {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
	
	}
</style>